<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 600px;">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 900px;height:600px;"></div>
</div>
<script src="lib/jquery-3.5.1.js"></script>
<!--<script src="lib/echart5/echarts.js"></script>-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js?_v_=1607268016278"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var _rawData = [
        {
            name: '1',
            upTime: '2020-1-1 15:00',
            expireTime: '2020-2-5 15:00',
        },
        {
            name: '2',
            upTime: '2020-1-1 15:00',
            expireTime: '2020-1-5 15:00',
        },
        {
            name: '2',
            upTime: '2020-2-1 15:00',
            expireTime: '2020-2-5 15:00',
        },
        {
            name: '4',
            upTime: '2020-3-1 15:00',
            expireTime: '2020-3-5 15:00',
        },
        {
            name: '4',
            upTime: '2020-3-5 15:00',
            expireTime: '2020-3-7 15:00',
        },
        {
            name: '1',
            upTime: '2020-2-8 15:00',
            expireTime: '2020-2-13 15:00',
        },
        {
            name: '1',
            upTime: '2020-12-8 15:00',
            expireTime: '2020-12-13 15:00',
        }
    ];
    // var formatData = _rawData.map(item => {
    //     var date = new Date(item.upTime);
    //     item.upTime = date;
    //     var date2 = new Date(item.expireTime);
    //     item.expireTime = date2;
    //     return item;
    // });
    data = _rawData.map((item, index) => {
        return {
            name: item.name,
            value: [
                item.name,
                item.upTime,
                item.expireTime,
                index
            ],
            itemStyle: {
                normal: {
                    color: 'red',
                },
                emphasis: {
                    // 高亮时点的颜色
                    opacity: 0.1
                },
            },
        }
    })
    let yData = Array.from(new Set(_rawData.map(item => item.name)));
    console.log(data)

    var option = makeOption()
    myChart.setOption(option);

    setTimeout(() => {
        myChart.setOption({
            yAxis: {
                data: yData
            },
            series: [{
                name: 'schedule',
                data: data
            }]
        });
    }, 500)

    function makeOption() {
        var option = {
            title: {
                text: 'Gantt of Airport Flight',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    axis: 'x'
                }
            },
            animation: false,
            dataZoom: [{
                type: 'slider',
                xAxisIndex: 0,
                filterMode: 'weakFilter',
                throttle: 1,
                height: 20,
                bottom: 0,
                start: 0,
                end: 5,
                handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                showDetail: false
            }],
            grid: {
                show: true,
                top: 70,
                bottom: 20,
                left: 100,
                right: 20,
                backgroundColor: '#fff',
                borderWidth: 0
            },
            xAxis: {
                type: 'time',
                minInterval: 3600 * 24 * 1000,
                //interval: 3600 * 24 * 1000,
                position: 'top',
                splitLine: {
                    lineStyle: {
                        color: ['#E9EDFF']
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    lineStyle: {
                        color: '#929ABA'
                    }
                },
                axisLabel: {
                    color: '#929ABA',
                    inside: false,
                    align: 'center'
                }
            },
            yAxis: {
                data: []
            },
            series: [{
                name: 'schedule',
                type: 'custom',
                renderItem: renderItem,
                emphasis: {
                    itemStyle: {
                        color: 'rgba(0,250,0,0.3)'
                    },
                },
                encode: {
                    x: [1, 2],
                    y: 0,
                    tooltip: [0]
                },
                data: []
            }]
        }
        return option;
    }

    function renderItem(params, api) {
        var categoryIndex = api.value(0);
        var start = api.coord([api.value(1), categoryIndex]);
        var end = api.coord([api.value(2), categoryIndex]);
        var height = api.size([0, 1])[1] * 0.2;

        var rectShape = clipRectByRect(params, {
            x: start[0],
            y: start[1] - height / 2,
            width: end[0] - start[0],
            height: height
        });
        // var start2 = api.coord([api.value(3), categoryIndex]);
        // var end2 = api.coord([api.value(4), categoryIndex]);
        // var rectShape2 = clipRectByRect(params, {
        //     x: start2[0],
        //     y: start2[1] - height / 2,
        //     width: end2[0] - start2[0],
        //     height: height
        // });
        return {
            type: 'group',
            children: [{
                type: 'rect',
                transition: ['shape'],
                shape: rectShape,
                style: api.style()
            }]
        };
    }

    function clipRectByRect(params, rect) {
        return echarts.graphic.clipRectByRect(rect, {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
        });
    }

</script>
</body>
</html>